/**
 * 质量报告组件
 * 显示文章质量分析的详细报告
 */

import React from 'react';
import { Card, Progress, Row, Col, List, Tag, Space, Alert, Collapse } from 'antd';
import {
  CheckCircleOutlined,
  ExclamationCircleOutlined,
  CloseCircleOutlined,
  TrophyOutlined,
  WarningOutlined,
} from '@ant-design/icons';
import type { QualityReport, IssueSeverity } from '@/stores/optimizer.store';
import './style.css';

const { Panel } = Collapse;

interface QualityReportProps {
  report: QualityReport;
  onApplySuggestion?: (suggestionId: string) => void;
  onJumpToIssue?: (position: number) => void;
}

/**
 * 获取评分颜色
 */
const getScoreColor = (score: number): string => {
  if (score >= 80) return '#52c41a';
  if (score >= 60) return '#faad14';
  return '#ff4d4f';
};

/**
 * 获取评分等级
 */
const getScoreGrade = (score: number): string => {
  if (score >= 90) return '优秀';
  if (score >= 80) return '良好';
  if (score >= 70) return '中等';
  if (score >= 60) return '及格';
  return '需改进';
};

/**
 * 获取严重程度颜色
 */
const getSeverityColor = (severity: IssueSeverity): string => {
  const colorMap: Record<IssueSeverity, string> = {
    critical: 'red',
    high: 'orange',
    medium: 'gold',
    low: 'blue',
  };
  return colorMap[severity];
};

/**
 * 获取严重程度文本
 */
const getSeverityText = (severity: IssueSeverity): string => {
  const textMap: Record<IssueSeverity, string> = {
    critical: '紧急',
    high: '重要',
    medium: '中等',
    low: '建议',
  };
  return textMap[severity];
};

export const QualityReport: React.FC<QualityReportProps> = ({
  report,
  onApplySuggestion,
  onJumpToIssue,
}) => {
  return (
    <div className="quality-report">
      {/* 综合评分 */}
      <Card className="overall-score-card" bordered={false}>
        <div className="score-header">
          <TrophyOutlined style={{ fontSize: 32, color: getScoreColor(report.overallScore) }} />
          <div className="score-info">
            <h2>综合评分</h2>
            <div className="score-value">
              <span className="score-number" style={{ color: getScoreColor(report.overallScore) }}>
                {report.overallScore}
              </span>
              <span className="score-grade">/{getScoreGrade(report.overallScore)}</span>
            </div>
          </div>
        </div>
      </Card>

      {/* 分项评分 */}
      <Card title="分项评分" size="small" style={{ marginTop: 16 }}>
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <div className="score-item">
              <div className="score-item-header">
                <span>结构完整度</span>
                <span className="score-item-value">{report.structureScore}分</span>
              </div>
              <Progress
                percent={report.structureScore}
                strokeColor={getScoreColor(report.structureScore)}
                showInfo={false}
              />
            </div>
          </Col>

          <Col span={12}>
            <div className="score-item">
              <div className="score-item-header">
                <span>逻辑连贯性</span>
                <span className="score-item-value">{report.coherenceScore}分</span>
              </div>
              <Progress
                percent={report.coherenceScore}
                strokeColor={getScoreColor(report.coherenceScore)}
                showInfo={false}
              />
            </div>
          </Col>

          <Col span={12}>
            <div className="score-item">
              <div className="score-item-header">
                <span>可读性</span>
                <span className="score-item-value">{report.readabilityScore}分</span>
              </div>
              <Progress
                percent={report.readabilityScore}
                strokeColor={getScoreColor(report.readabilityScore)}
                showInfo={false}
              />
            </div>
          </Col>

          <Col span={12}>
            <div className="score-item">
              <div className="score-item-header">
                <span>原创度</span>
                <span className="score-item-value">{report.originalityScore}分</span>
              </div>
              <Progress
                percent={report.originalityScore}
                strokeColor={getScoreColor(report.originalityScore)}
                showInfo={false}
              />
            </div>
          </Col>

          <Col span={12}>
            <div className="score-item">
              <div className="score-item-header">
                <span>SEO优化</span>
                <span className="score-item-value">{report.seoScore}分</span>
              </div>
              <Progress
                percent={report.seoScore}
                strokeColor={getScoreColor(report.seoScore)}
                showInfo={false}
              />
            </div>
          </Col>

          <Col span={12}>
            <div className="score-item">
              <div className="score-item-header">
                <span>语言质量</span>
                <span className="score-item-value">{report.languageScore}分</span>
              </div>
              <Progress
                percent={report.languageScore}
                strokeColor={getScoreColor(report.languageScore)}
                showInfo={false}
              />
            </div>
          </Col>
        </Row>
      </Card>

      {/* 优点和缺点 */}
      <Row gutter={16} style={{ marginTop: 16 }}>
        <Col span={12}>
          <Card
            title={
              <Space>
                <CheckCircleOutlined style={{ color: '#52c41a' }} />
                <span>优点</span>
              </Space>
            }
            size="small"
          >
            <List
              size="small"
              dataSource={report.strengths}
              renderItem={(item) => (
                <List.Item>
                  <CheckCircleOutlined style={{ color: '#52c41a', marginRight: 8 }} />
                  {item}
                </List.Item>
              )}
            />
          </Card>
        </Col>

        <Col span={12}>
          <Card
            title={
              <Space>
                <WarningOutlined style={{ color: '#faad14' }} />
                <span>待改进</span>
              </Space>
            }
            size="small"
          >
            <List
              size="small"
              dataSource={report.weaknesses}
              renderItem={(item) => (
                <List.Item>
                  <ExclamationCircleOutlined style={{ color: '#faad14', marginRight: 8 }} />
                  {item}
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

      {/* 优化建议 */}
      {report.suggestions.length > 0 && (
        <Card title="优化建议" size="small" style={{ marginTop: 16 }}>
          <Collapse>
            {report.suggestions.map((suggestion) => (
              <Panel
                key={suggestion.id}
                header={
                  <Space>
                    <Tag color={getSeverityColor(suggestion.severity)}>
                      {getSeverityText(suggestion.severity)}
                    </Tag>
                    <span>{suggestion.title}</span>
                  </Space>
                }
                extra={
                  onApplySuggestion && (
                    <a
                      onClick={(e) => {
                        e.stopPropagation();
                        onApplySuggestion(suggestion.id);
                      }}
                    >
                      应用
                    </a>
                  )
                }
              >
                <div className="suggestion-detail">
                  <p className="suggestion-description">{suggestion.description}</p>

                  <div className="suggestion-meta">
                    <Space size="large">
                      <span>
                        <strong>影响：</strong>
                        {suggestion.impact}
                      </span>
                      <span>
                        <strong>难度：</strong>
                        <Tag color={suggestion.effort === 'low' ? 'green' : suggestion.effort === 'medium' ? 'orange' : 'red'}>
                          {suggestion.effort === 'low' ? '简单' : suggestion.effort === 'medium' ? '中等' : '困难'}
                        </Tag>
                      </span>
                    </Space>
                  </div>

                  {suggestion.originalText && suggestion.suggestedText && (
                    <div className="suggestion-comparison">
                      <div className="comparison-item">
                        <strong>原文：</strong>
                        <p>{suggestion.originalText}</p>
                      </div>
                      <div className="comparison-item">
                        <strong>建议：</strong>
                        <p className="suggested-text">{suggestion.suggestedText}</p>
                      </div>
                    </div>
                  )}
                </div>
              </Panel>
            ))}
          </Collapse>
        </Card>
      )}

      {/* 问题列表 */}
      {report.issues.length > 0 && (
        <Card title="发现的问题" size="small" style={{ marginTop: 16 }}>
          <List
            dataSource={report.issues}
            renderItem={(issue) => (
              <List.Item
                actions={[
                  onJumpToIssue && (
                    <a key="jump" onClick={() => onJumpToIssue(issue.position)}>
                      跳转
                    </a>
                  ),
                ]}
              >
                <List.Item.Meta
                  avatar={
                    <Tag color={getSeverityColor(issue.severity)}>
                      {getSeverityText(issue.severity)}
                    </Tag>
                  }
                  title={issue.description}
                  description={
                    <>
                      <span style={{ color: '#8c8c8c' }}>位置: {issue.position}</span>
                      {issue.suggestion && (
                        <>
                          <br />
                          <span style={{ color: '#1890ff' }}>建议: {issue.suggestion}</span>
                        </>
                      )}
                    </>
                  }
                />
              </List.Item>
            )}
          />
        </Card>
      )}
    </div>
  );
};
